<template>
    <div class="container">
       
        <ul class="left">
            <li class="left-first" v-for="(item, index) in list" :key="item.id" @click="changeColor(index)"
                :class="{ active: currentIndex === index }">{{ item.title }}</li>
        </ul>
        <!-- 滑条 -->
        <p :style="{ top: tops }"></p>
        <transition name="fade">
            <component :is="coms"></component>
        </transition>
    </div>
</template>
  

<script setup>
import { ref, reactive, computed, shallowRef } from 'vue'
import Personal from './Personal.vue'
import Password from './Password.vue'


let currentIndex = ref(0)
let list = reactive([
    {
        id: 1,
        title: '个人中心',
    },
    {
        id: 2,
        title: '修改密码',
    }
])

//动态组件
let coms = shallowRef(Personal)

// 滑条
let tops = ref('')

let isShow = ref(true);
// 切换
let changeColor = (index) => {
    if (isShow.value) {
        coms.value = Password
        tops.value = '50px'
    } else {
        coms.value = Personal
        tops.value = ''
    }
    currentIndex.value = index;
    isShow.value = !isShow.value;
}

</script>

<style lang="less" scoped>
.container {
    margin-top: 20px;
    display: flex;
    height: calc(100% - 85px - 20px);

    &>p {
        border: 1px solid #1890ff;
        height: 40px;
        position: relative;
        top: 0px;
        transition: all 0.2s linear;
    }

    .left {
        width: 150px;
        // background: peru;
        border-right: 1px solid rgb(240, 240, 240);
        // text-align: right;
        list-style: none;
        position: relative;
        overflow: hidden;
        padding-left: 30px;
        flex-shrink: 0;

        .left-first {
            margin: 0 0 16px;
            padding: 8px 24px;

            &:hover {
                color: #1890ff;
                text-shadow: 0 0 .25px currentColor;
            }
        }

        .active {
            color: #1890ff;
            text-shadow: 0 0 .25px currentColor;
        }
    }
}

.fade-enter-active {
    transition: opacity .2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>